<template>
	<view class="holder">
		<view class="empty-wrapper flex flex-column align-center" v-if="!list.length">
			<view class="empty-icon"></view>
			<text class="desc">暂未持仓</text>
			<router-link to="/pages/market/market" navType="pushTab" class="turn-other">去看看</router-link>
		</view>
		<view class="holder-list" v-else>
			<view class="holder-item" v-for="(item,index) in list" :key="item.id" @tap="$emit('holdItemTap',index)">
				<view class="flex justify-between holder-item-content">
					<view class="left-wrapper flex flex-column justify-between">
						<text class="name">{{item.ptitle}}</text>
						<view class="price flex align-center">
							<text class="order-price">{{item.buyprice}}</text>
							<text class="arrow-right" style="padding: 0 15rpx;"> → </text>
							<text class="now-price"
								:style="{color:item.isUp?getUpColor:getDownColor}"
							 >{{item.sellprice}}</text>
						</view>
						<view class="flex">
							<text class="label mr-10">手续费 :</text>
							<text class="value">{{item.sx_fee}}</text>
						</view>
						<view class="flex">
							<view class="flex mr-10">
								<text class="label mr-10">止损 :</text>
								<text class="value">{{item.loss?item.loss:0}}</text>
							</view>
							<view class="flex">
								<text class="label mr-10">止赢 :</text>
								<text class="value">{{item.surplus?item.surplus:0}}</text>
							</view>
						</view>
					</view>
					<view class="right-wrapper flex flex-column justify-between">
						<view class="flex justify-end">
							<text class="right-text mr-10">{{item.ostyle==0?'买入':'卖出'}}/{{item.onumber}}手</text>
							<text class="right-text">#{{item.id}}</text>
						</view>
						<view class="ying-kui" :style="{color:item.yingkui_t>=0?getUpColor:getDownColor}">{{item.yingkui_t}}</view>
						<view class="time">{{item.buytime|time}}</view>
					</view>
				</view>
				
				<view class="flex" v-if="item.expend">
					<router-link class="bottom-btn" :to="{path:'/pages/stockDetail/stockDetail',query:{name:item.ptitle,id:item.pid}}">图表</router-link>
					<router-link class="bottom-btn" :to="{path:'/pages/setClose/setClose',query:{info:item,type:1}}">止盈止损</router-link>
					<view class="bottom-btn" @tap="$emit('closeOrder',item)">平仓</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {mapGetters} from "vuex" 
	export default{
		props:{
			list:{
				type:Array,
				required:true
			}
		},
		computed:{
			...mapGetters("user",["getDownColor","getUpColor"])
		}
	}
</script>

<style lang="scss" scoped>
	.holder{
		.desc{
			margin-top: 18rpx;
			font-weight: 500;
			color: #333333;
		}
		.turn-other{
			margin-top: 20rpx;
			width: 188rpx;
			height: 72rpx;
			background: #3D7FFF;
			border-radius: 36rpx;
			font-size: 28rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 72rpx;
			text-align: center;
		}
		.holder-list{
			.holder-item{
				padding:10rpx 20rpx;
				box-sizing: border-box;
				border-bottom: 1rpx solid #F0F8FF;
				.holder-item-content{
					min-height: 120rpx;
				}
				.left-wrapper{
					.name{
						font-size: 28rpx;
					}
					.order-price{
						font-size: 24rpx;
						font-weight: bold;
					}
					.now-price{
						font-size: 24rpx;
						font-weight: bold;
					}
					.label{
						font-size: 20rpx;
						color: #999;
					}
					.value{
						font-size: 20rpx;
						color: #999;
					}
					
				}
				.right-wrapper{
					.right-text{
						font-size: 20rpx;
						color: #333;
					}
					.ying-kui{
						font-size: 28rpx;
						text-align: right;
					}
					.time{
						font-size: 20rpx;
						color: #999;
						text-align: right;
					}
				}
				.mr-10{
					margin-right: 10rpx;
				}
				.bottom-btn{
					flex:1;
					background-color: $color-blue;
					font-size: 24rpx;
					text-align: center;
					color: #fff;
					line-height: 54rpx;
					border-radius: 10rpx;
					margin: 10rpx;
				}
			}
		}
	}
</style>
